
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://i.irenren.net/jquery-1.8.0.min.js"></script>
    <style>
        body{
            background-color: #E3EDCD
        }
        .content-create-auto{
            margin:15px;
        }
        .content-create-back{
            background-color: #DCE2F1 ;
        }
        .menu{
            background: #eee;
            position:absolute;

            top:0;
            left:110px;
        }

    </style>
</head>
<body style="">
<div><button id="commit" status="0">进入编辑状态</button></div>
<textarea id="t2" style="width:800px; height:400px; " >Little Daddy
Episode 1

Episode 2

Episode 3

Episode 4

Episode 5

Episode 6
Episode 7

Episode 8
</textarea>
<textarea id="t3" style="width:800px; height:400px; " >
章节1
man :1,2,3
章节2
man :1,2,3
章节3

章节4

章节5

章节6
man :1,2,3
章节7

章节8
man :1,2,3
</textarea>
<h3>请对照下面的原文和译文进行修改</h3>
<div>使用说明：复制粘贴原文和译文到相应的文本框，点击进入编辑按钮，原文和译文将会按照段落转化，鼠标滑过相应段落，可看到对应的译文（原文）背景色变化，鼠标右键点击段落，有新增段落和删除段落功能。此程序必须将原文和移动段落数修改一样多，才可以使用合并功能</div>
<p>温馨提示：快速双击段落可选择此段落所有文本，然后移动到相应段落</p>
<br>
<div style="height: 600px; overflow: auto">
    <div id="t1" style="width: 800px;float:left " ></div>
    <div id="t4" style="width: 800px;float:right"  ></div>
</div>
<h3>Result:</h3>
<div id="t5" style="height:800px; overflow:auto" contenteditable="true"></div>
<div style="clear:both"></div>
<div class="menu" id="menu" style="display: none">
    <div class="menu-append">向后添加一个段落</div>
    <div class="menu-del">删除此段落</div>
</div>
<pre id="show"></pre>


<script>
    var menu = $('#menu');
    var currentItem ;

    var tpl = function(index, content){
        return '<div  class="content-create-auto" index="'+index+'" contenteditable="true">'+content+'</div>';
    }

    var arrangingItem = function(that){
        that.find('.content-create-auto').each(function(index){
            if($.trim($(this).text()) == ''){
                $(this).remove()
            }
        })
        that.find('.content-create-auto').each(function(index){
            $(this).attr('index', index)
        })
    }

    menu.find('.menu-del').bind("click", function(){
        var par = currentItem.parent();
        currentItem.remove();
        arrangingItem(par)
        menu.hide();
    })

    menu.find('.menu-append').bind('click', function(){
        var par = currentItem.parent()
        currentItem.after(tpl(0, '这是一个新增的段落'))
        arrangingItem(par)
        menu.hide();
    })

    function showMenu(location, self){
        currentItem = self
        menu.show();
        menu.css('left', (location[0]-10)+'px');
        menu.css('top', (location[1]-10)+'px');
        menu.one('mouseleave', function(){
            $(this).hide()
        })


    }

    function delEmptyArr(arr){
        var newarr = [];
        var info = [];
        for(var i =0; i< arr.length; i++){
            if(arr[i].replace(/[ 　]+/g, '') != ''){
                if(arr[i][0] == '#'){
                    //info.push(arr[i]);
                }else{
                    if(info.length > 0){
                        newarr.push(info.join("\n")+arr[i]);
                        info = [];
                    }else{
                        newarr.push(arr[i])
                    }

                }

            }

        }
        return newarr
    }

    $(document).on('mouseover', '.content-create-auto', function(e){
        var index = $(this).attr('index');
        $('div[index='+index+']').addClass('content-create-back');
    })



    $(document).on('mousedown', '.content-create-auto', function(e){
        if(e.which == 3){
            event.preventDefault();
            showMenu([e.clientX, e.clientY], $(this));
            return false;
        }
        if(e.which == 1){
            arrangingItem($(this).parent())
        }


    })


    $(document).bind("contextmenu",function(e){
        return false;
    });




    $(document).on('mouseleave', '.content-create-auto', function(e){
        var index = $(this).attr('index');
        $('div[index='+index+']').removeClass('content-create-back');
    })
    function arr2html(arr){
        var str = '';

        for(var i=0; i<arr.length; i++){
            str += tpl(i, arr[i]);
        }
        return str;
    }



    $('#commit').click(function(){
        var status = $(this).attr('status')|| 0;
        var chi,eng;
        var t1 = $('#t1');
        var t4 = $('#t4');
        var t2 = $('#t2');
        var t3 = $('#t3');
        var t5 = $('#t5');

        if(status == 0 ){
            chi = t2.val().split("\n");
            eng = t3.val().split("\n");
            t2.hide();
            t3.hide();
            $(this).attr('status', '1')
            $(this).text('合并译文和原文')
            chi = delEmptyArr(chi);
            eng = delEmptyArr(eng);
            t1.html(arr2html(chi, 'chi'));
            t4.html(arr2html(eng, 'eng'));
        }else if(status == 1){
            arrangingItem(t1)
            arrangingItem(t4)
            chi = t1.find('div.content-create-auto').length;
            eng = t4.find('div.content-create-auto').length;
            if(chi != eng){
                alert('原文和译文段落数量不一样，请修改后合并')
            }else{
                var str = '';
                for(var i=0; i<chi; i++){
                    str += t1.find('div[index='+i+']').text()+"<br>";
                    str += t4.find('div[index='+i+']').text()+"<br>";
                }
                t5.html(str)
            }

        }



    })





</script>

</body>
</html>
